<template>
  <div class="container">
    <LabelBar v-if="orderInfo" label="客户信息" class="item">
      <van-field v-bind="textProps" label="工程公司" :value="orderInfo.companyName" readonly />
      <van-field v-bind="textProps" label="业主名称" :value="orderInfo.customerName" readonly />
      <van-field v-bind="textProps" label="业主联系人" :value="orderInfo.contactName" readonly />
      <van-field v-bind="textProps" label="业主地址" :value="orderInfo.customerAddress" readonly />
      <van-field v-bind="textProps" label="客户职务" :value="orderInfo.contactPost" readonly />
      <van-field v-bind="textProps" label="客户电话" readonly>
        <span
          slot="input"
          style="color: #1F87FC"
          @click="tel(orderInfo.contactPhone)"
        >{{ orderInfo.contactPhone }}</span>
      </van-field>
    </LabelBar>

    <LabelBar v-if="orderInfo" label="关联信息" class="item">
      <van-field v-bind="textProps" label="负责业务" :value="orderInfo.businessPeople" readonly />
      <van-field v-bind="textProps" label="单据日期" :value="orderInfo.orderDate" readonly />
      <van-field v-bind="textProps" label="订单编号" :value="orderInfo.orderNo" readonly />
      <van-field v-bind="textProps" label="风机型号" :value="orderInfo.winfanModel" readonly />
      <van-field v-bind="textProps" label="追加单号" :value="orderInfo.appendNo" readonly />
      <van-field v-bind="textProps" label="总协编号" :value="orderInfo.coordinateNo" readonly />
      <van-field v-bind="textProps" label="新订单号" :value="orderInfo.newOrder" readonly />
      <van-field v-bind="textProps" label="联络单信息" type="textarea" :value="orderInfo.liaisonContent" readonly />
    </LabelBar>

    <LabelBar v-if="orderInfo" label="服务处理" class="item">
      <van-field v-bind="textProps" label="负责人员" :value="orderInfo.primaryUserName" readonly />
      <van-field v-bind="textProps" label="配合人员" :value="orderInfo.coordinateUser" readonly />
      <van-field v-bind="textProps" label="服务分类" :value="orderInfo.serviceCategory|serviceCategoryType" readonly />
      <van-field v-bind="textProps" label="物料情况" :value="orderInfo.materiel" readonly />
      <van-field v-bind="textProps" label="进度跟踪" :value="orderInfo.progress" readonly />
      <van-field v-bind="textProps" label="结案日期" :value="orderInfo.serviceEndDate" readonly />
      <van-field v-bind="textProps" label="提交总协" :value="orderInfo.submitToCoordinate ? '是' : '否'" readonly />
      <van-field v-bind="textProps" label="接单日期" :value="orderInfo.receiveDate" readonly />
      <van-field v-bind="textProps" label="完成日期" :value="orderInfo.completeDate" readonly />
      <van-field v-bind="textProps" label="回访情况" :value="orderInfo.feedback" readonly />
      <van-field v-bind="textProps" label="单据状态" :value="orderInfo.orderStatus|statusMap" readonly />
      <van-field v-bind="textProps" label="附件" readonly>
        <div slot="input">
          <div v-for="(v,i) in orderInfo.files" :key="i" style="color: #1F87FC">
            <a :href="v.url">{{ v.realName }}</a>
          </div>
        </div>
      </van-field>
      <van-field v-bind="textProps" label="创建人" :value="orderInfo.createUserName" readonly />
      <van-field v-bind="textProps" label="创建时间" :value="orderInfo.createTime" readonly />
    </LabelBar>

    <div v-if="!orderInfo" class="nodata">
      <img src="@/assets/image/nodata.png" alt="">
    </div>

  </div>
</template>

<script>
import LabelBar from '../../components/LabelBar'
import { textProps } from '@/assets/utils'

export default {
  components: { LabelBar },
  filters: {
    statusMap(val) {
      const map = {
        '01': '待处理',
        '02': '处理中',
        '03': '已结案',
        '04': '已归档',
      }
      return map[val]
    },
    serviceCategoryType(val) {
      const map = {
        '01': '客服',
        '02': '维保',
        '03': '客诉',
        '04': '待定',
      }
      return map[val]
    },
  },
  props: {
    orderInfo: { type: Object, default: null },
  },
  data() {
    return {
      textProps,
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    tel(phone) {
      window.location.href = `tel:${phone}`
    },
  },
}
</script>

<style lang="less" scoped>
.container {

}
</style>
